<!-- 出口放箱历史记录 -->
<template>
  <div class="drop-box-history">
    <!-- 查询 -->
    <el-row :gutter="15">
      <el-col :span="20">
        <el-form :label-width="labelWidth" size="mini" :inline="true" class="demo-form-inline">
          <el-form-item label="提单号">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="船代公司">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="客户">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="费用状态">
            <el-select placeholder="请选择">
              <el-option>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="业务员">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="内部编号">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="样式">
            <el-select placeholder="请选择">
              <el-option>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" size="mini">查询</el-button>
        <el-button size="mini">清空</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-form :label-width="labelWidth" size="mini" :inline="true" class="demo-form-inline">
        <el-form-item label="回单状态">
          <el-select placeholder="请选择">
            <el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="转发状态">
          <el-select placeholder="请选择">
            <el-option>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="完成时间">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="oper-row filter">
      <div class="label">筛选条件</div>
      <div class="right">
        <el-radio-group>
          <el-radio :label="0">全部显示</el-radio>
          <el-radio :label="1">新业务</el-radio>
          <el-radio :label="2">放单中</el-radio>
          <el-radio :label="3">已完成</el-radio>
          <el-radio :label="4">已拒绝</el-radio>
          <el-radio :label="5">没预配</el-radio>
          <el-radio :label="6">船期早</el-radio>
          <el-radio :label="7">明天放</el-radio>
          <el-radio :label="8">已退关</el-radio>
          <el-radio :label="9">等通知</el-radio>
          <el-radio :label="10">客户取消</el-radio>
          <el-radio :label="11">退单</el-radio>
          <el-radio :label="12">申请中</el-radio>
          <el-radio :label="13">爆仓</el-radio>
          <el-radio :label="14">有问题</el-radio>
          <el-radio :label="15">缺箱子</el-radio>
          <el-radio :label="16">换单中</el-radio>
        </el-radio-group>
      </div>
    </el-row>
    <!-- 表格 -->
    <el-table
      border
      height="400px"
      style="width: 100%">
      <el-table-column
        label="序号">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="状态">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="客户名称">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="船名">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="航次">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="提单号">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="箱型箱量">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="客户备注">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="打单费">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="服务费">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="放箱备注">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="客户电话">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="最后修改人">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="船代公司">
        <template slot-scope="scope">
        </template>
      </el-table-column>
      <el-table-column
        label="回单状态">
        <template slot-scope="scope">
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      labelWidth: '80px'
    }
  }
}
</script>

<style lang="less">
  .oper-row{
    position: relative;
    padding: 5px 0;
    &.filter{
      .right{
        padding-left: 80px;
      }
    }
    .label{
      position: absolute;
      margin-right: 20px;
      display: inline-block;
      top: 8px;
      left: 0;
    }
    .right{
      padding-left: 130px;
      > * {
        margin-top: 5px;
      }
      span{
        cursor: pointer;
      }
    }
  }
</style>
